Trade the step-3-of-3 ladder for the shared header of all three pages - #49

This page was the only one of the three that told the whole story — and it told it as a numbered ladder: "This is step 3 of 3". The numbering claims an order that does not hold. samples-controls is a reference you come back to whenever you need one control, not a step you finish once, and a reader who arrives here first is not behind.

What lands on the page

The ladder becomes the card strip that now sits before the footer on all three pages — same three questions, no numbers — and a bar above the masthead carries Learn · Controls · Stack with the current one marked. Both blocks are identical in abap2UI5/samples, /samples-controls and /samples-stack; only aria-current moves.

They carry verbs rather than repository names — samples-controls tells a newcomer nothing, Controls / every UI5 control, searchable tells them everything — so the repository name lives in the title attribute and the footer instead.

Two more corrections specific to this page:

• The masthead note said "there is no in-browser demo here, unlike on the samples and samples-controls pages". That stopped being the difference when samples-controls dropped its demo — both siblings now link into the playground per card, which is what this page cannot do. It now says what it actually means: there is no Playground button on a card here, and why.
• The empty result named only abap2UI5/samples; it now names both siblings, by the verbs the bar uses.

Why the blocks are copied rather than shared

Three static pages cannot share a file at run time without one of them fetching from another host, which is exactly what this folder avoids — it is the deployed site, uploaded unchanged. So the blocks are copied, which is already the practice here: stack.css says out loud that its custom properties are the ones samples-controls uses, "on purpose".

npm run check:family-nav keeps the copies honest: it fails on a subtitle reworded on one page only, a you are here marker left on whichever page was copied from, a sibling missing from the footer, or a link to …/samples-controls/search/, which is a 404. It is offline on purpose — diffing the three repositories against each other needs the network, and then this repository goes red because github.com is having a morning. It checks the canonical strings it carries itself, the same in all three copies, so rewording one means editing three files. It runs in npm run check and as its own workflow.

Shape of the copies

The styles sit at the end of stack.css between the same markers and read three tokens this page sets in :root — --family-width (var(--wide) here), --family-gutter, --family-bleed. Those three are the only thing the copies may differ in, because the three pages are built around containers of different widths. Every colour comes from the palette already here, so light and dark come free. The CSS block is byte-identical across the three repositories (verified). The .ladder and .steps rules go with the section they styled.

One detail worth knowing: the current page is coloured with --accent, not --accent-ink. Here --accent-ink is white — it is the text on the accent fill, as on a pressed .chip — and white on --accent-soft is nothing at all.

Verification

Rendered in Chromium on all three pages, light and dark, at 1280px and 390px: the right page marked, exactly one marker per block, no sideways scrolling, no console errors. The strip carries a top rule so it does not read as the tail of .packages, which has one. check:web, check:prose and check:family-nav pass; the check was also tested negatively and rejects a wrong aria-current, a reworded subtitle and the retired 404 address with exit 1.

No generator, package index or apps.json is touched. deploy-web already triggers on web/**, so the page redeploys on merge.

Generated by Claude Code